



        header .top .menuBtn.cb *{
            background: #fff;
        }
        
        main .proSwiper .screenLines i, 
        main .proSwiper .screenLines:before, 
        main .proSwiper .screenLines:after{
            position: absolute;
            z-index: 10;
        }
        main .proSwiper{
            height: 100vh;
            position: relative;
            background: url(../img/common/aperture.jpg) no-repeat center center;
            background-size: cover;
        }
        main .proSwiper .content{
            color: #fff;
        }
        main .proSwiper .content:after{
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: #6c98bd;
            opacity: .5;
            z-index: 2;
        }
        main .proSwiper .content:after{
            background: #314552;
            opacity: .35;
        }
        main .proSwiper .content>*{
            position: absolute;
            z-index: 3;
        }
        main .proSwiper .content .opacitySwiper{
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        main .proSwiper .content .opacitySwiper img{
            transition: opacity .5s .3s;
            opacity: 0;
            z-index: 0;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        .mobileDevice main .proSwiper .content .opacitySwiper img{
            width: 100%;
            height: auto;
            max-width: 100%;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        main .proSwiper .content .opacitySwiper img.active{
            opacity: 1;
            transition-duration: .8s;
            transition-delay: 0s;
            z-index: 1;
        }
        main .proSwiper .content .btns{
            left: 16.66667%;
            bottom: 75px;
            counter-reset: subsection;
            z-index: 10;
        }
        main .btns p{
            width: 42px;
            height: 42px;
            border: 1px solid #fff;
            position: relative;
            z-index: 2;
        }    
        main .btns p.unclickable{
            border-color: hsla(0,0%,100%,.4);
            cursor: default;
        }
        main .btns p img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        main .btns p img:nth-child(2){
            display: none;
        }
        main .btns.blk p img{
            display: none;
        }
        main .btns.blk p img:nth-child(2){
            display: block;
        }
        main .btns p:after{
            content: '';
            width: 0%;
            height: 100%;
            top: 0px;
            position: absolute;
            z-index: -1;
            background: rgba(0,0,0,.15);
            transition: width .45s cubic-bezier(.4,0,.2,1) 75ms;
        }
        main .btns .prev:after{
            right: 0px;
        }
        main .btns .next:after{
            left: 0px;
        }
        main .btns p:hover:after{
            width: 100%;
            transition-delay: 0s;
        }
        main .btns p.unclickable:hover:after{
            width: 0%;
        }
        main .btns .next{
            margin-left: -1px;
        }
        main .proSwiper .content .choose{
            position: absolute;
            left: 40px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            margin-left: -7px;
            transition: opacity .5s;
        }
        main .proSwiper .content .choose .op{
            margin: 40px 0px;
            cursor: pointer;
            position: relative;
            padding-left: 25px;
        }
        main .proSwiper .content .choose .op .circle{
            width: 13px;
            height: 13px;
            position: absolute;
            left: 0px;
            top: 50%;
            transform: translateY(-50%);
        }
        main .proSwiper .content .choose .op .circle:before,
        main .proSwiper .content .choose .op .circle:after{
            content: '';
            position: absolute;
            border: 1px solid #fff;
            border-radius: 50%;
            margin: 0 auto;
            transition: opacity .3s;
        }
        main .proSwiper .content .choose .op .circle::before{
            width: 12px;
            height: 12px;
            top: 0px;
            left: 0px;
            opacity: 0;
        }
        main .proSwiper .content .choose .op .circle::after{
            width: 4px;
            height: 4px;
            top: 4px;
            left: 4px;
            opacity: .4;
        }
        main .proSwiper .content .choose .op.active .circle:before,
        main .proSwiper .content .choose .op:hover .circle::after,
        main .proSwiper .content .choose .op.active .circle::after{
            opacity: 1;
        }
        main .proSwiper .content .choose .op .order{
            line-height: 30px;
            height: 30px;
            font-size: 21px;
            color: #999;
            transition: color .3s;
        }
        main .proSwiper .content .choose .op.active .order,
        main .proSwiper .content .choose .op:hover .order{
            color: #fff;
        }
        main .proSwiper .content .choose .op .order:before{
            counter-increment: subsection;
            content: "0" counter(subsection);
            display: inline-block;
            margin-right: 3px;
        }

        main .proSwiper .content .purpose{
            width: 33.33333%;
            top: 33.33333%;
            left: 16.66667%;
        }
        main .proSwiper .content .purpose .item{
            position: absolute;
            width: 100%;
            top: 0px;
            left: 0px;
            opacity: 0;
            transition: opacity .3s;
        }
        main .proSwiper .content .purpose .item.active{
            opacity: 1;
        }
        
        main .proSwiper .content .purpose p{
            font-size: 56px;
        }
        main .proSwiper .content .purpose p + p{
            margin-top: 13vh;
        }
        main .proSwiper .content .descFlip{
            position: initial;
        }
        main .proSwiper .content .descFlip .item{
            position: absolute;
            z-index: 3;
        }
        main .proSwiper .content .descFlip .item>*{
            transition: opacity .5s,transform .5s;
            opacity: 0;
            transform: translateY(30px);
        }
        main .proSwiper .content .descFlip .item.active>*{
            opacity: 1;
            transform: translateY(0px);
        }
        main .proSwiper .content .descFlip .item.active>*{
            transition-delay: .3s;
        }
        main .proSwiper .content .descFlip .item.active>ul{
            transition-delay: .5s;
        }
        main .proSwiper .content .descFlip .item{
            top: 30%;
            left: 50%;
        }
        main .proSwiper .content .descFlip .item .itemTtl{
            font-size: 18px;
        }
        main .proSwiper .content .descFlip .item ul{
            margin-top: 13vh;
            max-width: 480px;
        }
        main .proSwiper .content .descFlip .item ul li{
            position: relative;
            padding-left: 10px;
            font-size: 24px;
            margin-bottom: 15px;
        }
        main .proSwiper .content .descFlip .item ul li::before{
            content: '';
            width: 3px;
            height: 3px;
            border-radius: 50%;
            overflow: hidden;
            background: #fff;
            position: absolute;
            left: 5px;
            top: 50%;
            transform: translate(-50%,-50%);
        }

        main .nav{
            padding: 120px 16.66667%;
            flex-wrap: wrap;
        }
        main .nav li{
            width: 25%;
            padding: 20px 0px;
        }
        main .nav li a{
            line-height: 20px;
            font-size: 20px;
            transition: color .5s;
        }
        main .nav li a::before{
            content: '';
            vertical-align: middle;
            display: inline-block;
            background: #a0a0a0;
            width: 35px;
            height: 1px;
            transition: all .3s;
            margin-right: 25px;
        }
        main .nav li a.active,
        main .nav li a:hover{
            color: #6c98bd;
        }
        main .nav li a.active::before,
        main .nav li a:hover::before{
            width: 80px;
            background: #6c98bd;
        }

        main .page{
            padding-top: 130px;
            padding-bottom: 90px;
        }
        main .page a{
            position: relative;
            height: 50px;
            line-height: 50px;
            width: 50px;
            margin: 0px 5px;
            font-size: 18px;
            text-align: center;
            border: 1px solid #999;
            transition-property: border,background,color;
            transition-duration: .5s;
            transition-timing-function: ease;
        }
        main .page .unable{
            pointer-events: none;
        }
        main .page a.current,
        main .page a:hover{
            border-color: #6c98bd;
            background: #6c98bd;
            color: #fff;
        }
        main .page .prev{
            margin-right: 50px;
        }
        main .page .next{
            margin-left: 50px;
        }
        main .page a img{
            opacity: 0;
            transition: opacity .5s;
        }
        main .page a .blk{
            opacity: 1;
        }
        main .page a:hover img{
            opacity: 1;
        }
        main .page a:hover .blk{
            opacity: 0;
        }
        

        main .productInfo{
            padding-top: 190px;
        }
        main .productInfo .desc{
            padding-bottom: 90px;
            border-bottom: 1px solid #eee;
        }
        main .proList .desc:nth-child(even){
            flex-direction: row-reverse;
        }
        main .proList .desc:nth-child(even) .txt a img{
            transform: rotateY(180deg);
        }
        main .desc>*{
            width: 50%;
        }
        main .desc .pic{
            position: relative;
            background: url(../img/common/aperture.jpg) no-repeat center center;
            background-size: cover;
            overflow: hidden;
        }
        main .desc .pic::before,
        main .desc .pic::after{
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0px;
            left: 0px;
        }
        main .desc .pic::before{
            opacity: .35;
            z-index: 2;
            background: #314552;
        }
        main .desc .pic::after{
            opacity: 0;
            transition: .3s ease-out;
            background: rgba(0,0,0,.2);
            z-index: 3;
        }
        main .desc:hover .pic::after{
            opacity: 1;
        }
        main .desc .pic img{
            width: 100%;
            height: auto;
            display: block;
            transition: transform .3s;
        }
        main .desc:hover .pic img{
            transform: scale(1.1);
        }
        main .desc .txt{
            background: #f8f7fa;
            padding: 110px 0px;
        }
        main .productInfo .desc .txt{
            padding-left: 140px;
            padding-right: 140px;
        }
        main .proList .desc>*{
            cursor: default;
        }
        main .proList .desc .txt{
            position: relative;
        }
        main .proList .desc:nth-child(odd) .txt{
            padding-left: 130px;
            padding-right: 170px;
        }
        main .proList .desc:nth-child(even) .txt{
            padding-left: 280px;
            padding-right: 20px;
        }
        main .proList .desc .txt .link{
            position: absolute;
            top: 40px;
            bottom: 40px;
            right: 0px;
            width: 150px;
            background: #6c98bd;
            margin: auto;
        }
        main .proList .desc:nth-child(even) .txt .link{
            left: 0px;
            right: auto;
        }
        main .proList .desc .txt .link p{
            width: 70px;
            height: 70px;
            border: 2px solid #fff;
        }
        main .desc .txt .name{
            font-size: 20px;
            font-weight: bold;
            color: #9091a2;
            letter-spacing: 5px;
            transition: letter-spacing .3s ease-out;
        }
        main .desc:hover .txt .name{
            letter-spacing: 6.2px;
        }


        main .productInfo .desc .txt .name{
            position: relative;
            padding-bottom: 30px;
        }
        main .productInfo .desc .txt .name::after{
            content: '';
            position: absolute;
            left: 0px;
            bottom: 1px;
            width: 420px;
            height: 1px;
            background: #d2d2d2;
        }
        main .desc .txt .t{
            margin-top: 75px;
        }
        main .desc .txt .t p{
            font-size: 48px;
        }
        main .desc .txt .t p + p{
            margin-top: 15px;
        }

        main .productInfo .details{
            margin-top: 80px;
        }
        main .productInfo .details>p{
            font-size: 48px;
            margin-bottom: 80px;
            }
        main .productInfo .details .box img{
            display: block;
            width: 100%;
            height: auto;
        }
        main .productInfo .details .box img + img{
            margin-top: 35px;
        }
        

        @media(max-width:1700px){
            main .desc .txt{
                padding: 90px 0px;
            }
            main .proList .desc:nth-child(odd) .txt{
                padding-left: 110px;
                padding-right: 120px;
            }
            main .proList .desc:nth-child(even) .txt{
                padding-left: 210px;
                padding-right: 20px;
            }
            main .desc .txt .t{
                margin-top: 65px;
            }
            main .proList .desc .txt .link{
                width: 100px;
            }
            main .proList .desc:nth-child(even) .txt .link{
                left: 0px;
                right: auto;
            }
            main .proList .desc .txt .link p{
                width: 60px;
                height: 60px;
            }            
            main .proList .desc .txt a p img{
                width: 40px;
                height: auto;
            }
        }
        @media(max-width:1600px){
            main .proSwiper .content .purpose p{
                font-size: 40px;
            }
            main .proSwiper .content .descFlip .item .itemTtl{
                font-size: 14px;
            }
            main .proSwiper .content .descFlip .item ul li{
                font-size: 18px;
                margin-bottom: 10px;
            }

            main .desc .txt{
                padding: 70px 0px;
            }
            main .productInfo .desc .txt .name::after{
                width: 320px;
            }
            main .productInfo .desc .txt{
                padding-left: 100px;
                padding-right: 100px;
            }
            main .proList .desc:nth-child(odd) .txt{
                padding-left: 70px;
            }
            main .proList .desc:nth-child(even) .txt{
                padding-left: 170px;
            }
            main .desc .txt .t{
                margin-top: 45px;
            }
            main .desc .txt .t p,
            main .productInfo .details>p{
                font-size: 36px;
            }
            main .nav{
                padding: 100px 16.66667%;
            }
            main .nav li a{
                font-size: 18px;
            }
            main .nav li a::before{
                margin-right: 20px;
            }
            main .nav li a.active::before,
            main .nav li a:hover::before{
                width: 70px;
            }
            main .page{
                padding-top: 100px;
                padding-bottom: 70px;
            }
        }
       
        @media(max-width:1400px){
            main .proSwiper .content .choose .op .order{
                font-size: 18px;
                line-height: 24px;
                height: 24px;
            }
        }
        @media(max-width:1200px){
            main .nav{
                padding: 80px 16.66667%;
            }
            main .nav li a{
                font-size: 16px;
            }
            main .nav li a::before{
                width: 30px;
            }
            main .nav li a:hover::before,
            main .nav li a:hover::before{
                width: 55px;
            }

            main .proSwiper .content .purpose p{
                font-size: 36px;
            }

            main .productInfo{
                padding-top: 160px;
            }
            main .desc .txt{
                padding: 50px 0px;
            }
            main .productInfo .desc .txt .name::after{
                width: 70%;
            }
            main .productInfo .desc .txt{
                padding-left: 80px;
                padding-right: 80px;
            }
            main .proList .desc:nth-child(odd) .txt{
                padding-left: 65px;
            }
            main .proList .desc:nth-child(even) .txt{
                padding-left: 165px;
            }
            main .desc .txt .name{
                font-size: 17px;
            }
            main .desc .txt .t{
                margin-top: 30px;
            }
            main .desc .txt .t p,
            main .productInfo .details>p{
                font-size: 30px;
            }
        }
        @media(max-width:1024px){
            
            main .nav{
                padding: 60px 40px;
            }
            main .nav li a{
                font-size: 14px;
            }
            main .nav li a::before{
                width: 25px;
                margin-right: 15px;
            }
            main .nav li a.active::before,
            main .nav li a:hover::before{
                width: 40px;
            }

            main .proSwiper .content .choose{
                opacity: 0;
                pointer-events: none;
            }
            main .proSwiper .content .purpose{
                top: 16%;
                width: calc(100% - 16.6666% - 14px);
            }
            main .proSwiper .content .purpose p{
                font-size: 30px;
            }
            main .proSwiper .content .purpose p + p{
                margin-top: 1vh;
            }
            main .proSwiper .content .descFlip .item{
                left: 16.66667%;
                top: 50%;
                transform: translateY(-50%);
            }
            main .proSwiper .content .descFlip .item ul{
                margin-top: 5vh;
            }
            main .proSwiper .content .descFlip .item ul li{
                font-size: 16px;
            }
            

            main .proList .desc:first-child{
                margin-top: 0px;
            }
            main .proList .desc{
                margin-top: 60px;
            }
            main .desc{
                flex-direction: column !important;
            }
            main .desc>*{
                width: 100%;
            }
            main .desc .txt{
                padding: 30px 0px;
            }
            main .productInfo .desc .txt .name::after{
                width: 200px;
            }
            main .productInfo .desc .txt{
                padding-left: 40px;
                padding-right: 40px;
            }
            main .proList .desc .txt{
                padding-left: 40px !important;
                padding-right: 40px !important;
            }
            main .desc .txt .t p,
            main .productInfo .details>p{
                font-size: 24px;
            }
            main .desc .txt .t p + p{
                margin-top: 10px;
            }
            main .proList .desc>*{
                cursor: pointer;
            }
            main .proList .desc .txt .link{
                display: none;
            }

            
            main .page{
                padding-top: 80px;
                padding-bottom: 60px;
            }
            main .page a{
                width: 40px;
                line-height: 40px;
                height: 40px;
                font-size: 16px;
            }
            main .page .prev{
                margin-right: 30px;
            }
            main .page .next{
                margin-left: 30px;
            }
        }
        @media(max-width:767px){
            .screenLines .hor,
            main .btns {
                bottom: 42px !important;
            }
            main .nav{
                padding: 30px 14px;
            }
            main .nav li{
                width: 100%;
                padding: 8px 0px;
            }
            main .productInfo{
                padding-top: 120px;
            }

            main .proSwiper .content .purpose p{
                font-size: 24px;
            }
            main .proSwiper .content .descFlip .item .itemTtl{
                font-size: 12px;
            }
            main .proSwiper .content .descFlip .item ul li{
                font-size: 14px;
                margin-bottom: 5px;
            }
            
            main .desc .txt{
                padding: 20px 0px;
            }
            main .productInfo .desc .txt .name::after{
                width: 120px;
            }
            main .productInfo .desc .txt{
                padding-left: 20px;
                padding-right: 20px;
            }
            main .proList .desc .txt{
                padding: 20px 30px !important;
            }
            main .desc .txt .name{
                font-size: 14px;
            }
            main .desc .txt .t p, 
            main .productInfo .details>p{
                font-size: 20px;
            }
            main .productInfo .details{
                margin-top: 50px;
            }
            

            main .page a{
                width: 35px;
                line-height: 35px;
                height: 35px;
                font-size: 14px;
            }
            main .page .prev{
                margin-right: 15px;
            }
            main .page .next{
                margin-left: 15px;
            }
        }
